<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id='i1' type="button" value="全选">
<input id='i2' type="button" value="反选">
<input id='i3' type="button" value="取消">
<table border="1" style="margin-top: 10px">
    <thead>
        <th>选项</th>
        <th>IP</th>
        <th>端口</th>
    </thead>
    <tbody id="tb1">
    <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
    </tr>
    </tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
//    function checkall() {
//        $('#tb1 :checkbox').prop('checked', true);
//    }
    document.getElementById('i1').onclick = function () {
        $('#tb1 :checkbox').prop('checked', true)
    };
    document.getElementById('i3').onclick = function () {
        $('#tb1 :checkbox').prop('checked', false)
    };
    document.getElementById('i2').onclick = function () {
        $('#tb1 :checkbox').each(function () {
            //方法一：
            //console.log(this) this这里获取到是dom格式
//            if(this.checked){
//                this.checked =false
//            }else {
//                this.checked =true
//            }

            //方法二：
            //$(this) 将this转换为jQuery模式
//            if($(this).prop('checked')){
//                $(this).prop('checked',false)
//            }else {
//                $(this).prop('checked',true)
//            }

            //方法三：
            //三元运算 var v = 条件 ? 真值 : 假值 如果条件为true,返回真值,false返回假值
            var v = $(this).prop('checked')?false:true
            $(this).prop('checked',v)
        })
    }
</script>
</body>
</html>